<template>
	<header>
		<router-link :to="{name: 'index' }" class="brand">
	      <img src="https://o4j806krb.qnssl.com/public/images/cnodejs_light.svg" alt="cnodejs-logo">
	    </router-link>
	    <ul class="navbar">
	    	<li>
	    		<router-link :to="{name: 'index' }">
	    			首页
	    		</router-link>
	    	</li>
	    	<li>
	    		<router-link :to="{name: 'index' }">
	    			登入
	    		</router-link>
	    	</li>
	    	<li>
	    		<router-link :to="{name: 'index' }">
	    			退出
	    		</router-link>
	    	</li>
	    </ul>
	</header>
</template>

<script>
    export default {
      data() {
          return {};
      },
      created() {
      },
    };
</script>

<style lang='scss' scoped>
	header{
		padding: 0 5%;
		overflow: hidden;
		background-color: #444;
		margin-bottom: 20px;
	}
	.brand{
		width: 120px;
		height: 50px;
		float: left;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.navbar{
		float: right;
		overflow: hidden;
		margin-right: 2%;
		height: 100%;
		li{
			float: left;
			height: 50px;
			line-height: 50px;
			padding: 0 10px;
			text-align: center;
			a{
				color: #ccc;
				font-size: 14px;
				font-weight: bold;
			}
		}
	}
</style>